<template>
   <Table 
      ref="listTable" 
      border
      :columns="qualityColumns"
      :data="tableList"
      height="280"
      :span-method="handleSpan"
      @mouseover="handleMouseOver"
      @mouseout="handleMouseOut"
   >
   </Table>
</template>

<script>
import {qualityColumns} from '../../js/quality-table'
   export default {
      props:{
         tableData:{
            type:Array,
            default:() => []
         },
         buName:{
            type:String,
            default:""
         }
      },
      data () {
         return {
            qualityColumns:qualityColumns(),
            tableList:[],
            interval: null
         }
      },

      mounted() {
         this.tableAnimation("start")
         // 获取目标元素
         var element = this.$refs.listTable.$el;
         // 鼠标移入事件
         element.addEventListener('mouseover',() => {
            this.tableAnimation("paused")
         });
         // 鼠标移出事件
         element.addEventListener('mouseout', () =>  {
            this.tableAnimation("running")
         });
      },

      methods: {
         handleSpan ({ row, column, rowIndex, columnIndex }) {
            if (column.key === "problemLabel") {
               const rowspan = this.getRowspan(row, rowIndex,"problemLabel");
               if (rowspan >= 1) {
                  return {
                     rowspan,
                     colspan: 1
                  };
               } else {
                  return {
                     rowspan: 0,
                     colspan: 0
                  };
               }
            }
            if (column.key === "problemInfo") {
               const rowspan = this.getRowspan(row, rowIndex,"problemInfo");
               if (rowspan >= 1) {
                  return {
                     rowspan,
                     colspan: 1,
                  };
               } else {
                  return {
                     rowspan: 0,
                     colspan: 0,
                  };
               }
            }
         },

         getRowspan(row, rowIndex,key) {
            const currentFactorMainNumber = row[key];
            let rowspan = 1; // 默认rowspan为1，也就是每个单元格只占一行
            // 如果当前行不是第一行，则先查看前一行，如果前一行的值（同列单元格）与当前行（同列单元格）相同，则将当前单元格与前一行合并（当前单元格占0行，rowspan=0）
            if (rowIndex > 0) {
               const previousRow = this.tableList[rowIndex - 1];
               const previousFactorMainNumber = previousRow[key];
               if (currentFactorMainNumber === previousFactorMainNumber) {
                  if(key == "problemLabel"){
                     return 0;
                  }
                  else{//如果合并相邻的两行problemInfo，则必须保证该两行对应的problemLabel也相同
                     if(row.problemLabel == previousRow.problemLabel){
                        return 0;
                     }
                  }
               }
            }
            // 然后向查看，如果后面行（同列单元格）的值与当前行（同列单元格）相同，则每找到一行rowspan加1，直到找到与当前行（同列单元格）的值不同的行为止。（也就是说只能合并连续的行）
            for (let i = rowIndex + 1; i < this.tableList.length; i++) {
               const nextRow = this.tableList[i];
               const nextFactorMainNumber = nextRow[key];
               if (currentFactorMainNumber === nextFactorMainNumber) {
                  if(key == "problemLabel"){
                     rowspan++;
                  }
                  else{
                     if(row.problemLabel == nextRow.problemLabel){
                        rowspan++;
                     }
                     else{
                        break;
                     }
                  }
               } else {
                  break;
               }
            }
            return rowspan;
         },

         tableAnimation(type) {
            const table = this.$refs.listTable.$el.querySelector('.ivu-table-body');
            if (table) {
               var childElements = table.children;
			   console.log(childElements,"childElementschildElements")
               for (var i = 0; i < childElements.length; i++) {
                  if(type === "start"){
                     childElements[i].classList.add('scrollTab');
                  }
                  else if(type === "running"){
                     childElements[i].style.animationPlayState = 'running'
                  }
                  else if(type === "paused"){
                     childElements[i].style.animationPlayState = 'paused'
                  }
               }
            }
         },

         handleMouseOver(){
            this.tableAnimation("paused")
         },
         handleMouseOut(){
            this.tableAnimation("running")
         }
      },

      watch:{
         tableData:{
            handler(newVal) {
               this.tableList = JSON.parse(JSON.stringify(newVal || []));
               if(this.tableList?.length && this.tableList?.length < 5){
                  const len = this.tableList.length;
                  for(let i = len; i < 5;i++){
                     this.tableList.push({
						isEmpty:true,
                        problemLabel:"",
                        problemInfo:"",
                        tbName:"",
                        problemNum:""
                     })
                  }
               }
            },
            deep: true,
            immediate: true//开启立即监听
         }
      },

      beforeDestroy() {
         // 清除定时器
         if (this.interval) {
            clearInterval(this.interval);
         }
      }
   }
</script>
<style lang="less" scoped>
  .warp {
    height: 280px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
  /deep/ .scrollTab{
   transform: translateY(0);
   animation: scroll-top 60s linear infinite;
  }
  @keyframes scroll-top {
   0% {
      transform: translateY(0);
   }
   100% {
      transform: translateY(-100%);
   }
}
  
</style>
